<template>
  <div class="common-layout" style="background-color: #f1f1f5; height: 900px;width: 1500px;margin-top: 10px;">
    <el-container>
      <el-container>
        <el-container>
          <el-aside width="800px" style="background-color:#ffff; height: 170px; width: 700px; margin-top: 10px;">
            <div class="data-overview" >
              <div class="header">
                <span class="title">数据概况</span>
                <span class="date">{{ currentDate }} {{ currentTime }}</span>
              </div>
              <div class="data-container">
                <div class="data-item">
                  <span class="value">{{ onlineBookings }}</span>
                  <span class="label">今日在线预订</span>
                </div>
                <div class="data-item">
                  <span class="value">{{ expectedCheckins }}</span>
                  <span class="label">今日预计入住</span>
                </div>
                <div class="data-item">
                  <span class="value">{{ newCheckins }}</span>
                  <span class="label">今日新入住</span>
                </div>
                <div class="data-item">
                  <span class="value">{{ newCustomers }}</span>
                  <span class="label">今日新顾客数</span>
                </div>
              </div>
            </div>
          </el-aside>
          <el-main width="300px" style="background-color:#ffff;  margin-left: 8px;">
            <p style="text-align: center;">店铺还没有公众号</p>
            <el-button style="margin-left: 100px;">去绑定</el-button>
          </el-main>
        </el-container>
        <el-main style="margin-top: 10px; margin-left: 5px;height: 250px; background-color: #ffff;">
            <h4>常用功能</h4>
            
        </el-main>
        <el-footer style="margin-top: 10px; margin-left: 5px;height: 350px; background-color: #ffff;">
          <h4>营销活动</h4>
        </el-footer>
      </el-container>
      <el-aside width="400px" style="height: 800px; background-color: #ffff; margin-top: 10px; margin-left: 5px;">
        <div class="app-container">
          <!-- 试用版信息 -->
          <div class="trial-section">
            <h3>试用版</h3>
            <p>剩余 {{ remainingDays }} 天 ({{ expirationDate }})</p>
            <p>您的套餐即将到期，为了不影响您的正常经营，请及时续费</p>
            <button class="upgrade-btn" @click="handleUpgrade">立即升级</button>
          </div>

          <!-- 公告部分 -->
          <div class="announcement-section">
            <h3>公告</h3>
            <div class="announcement-list">
              <div v-for="(announcement, index) in announcements" :key="index" class="announcement-item">
                <span v-if="announcement.isImportant">[重要]</span>
                {{ announcement.title }}
                <span class="date">{{ announcement.date }}</span>
              </div>
            </div>
            <div class="more-link">更多</div>
          </div>

          <!-- 公众号部分 -->
          <div class="official-account-section">
            <h3>微盟智慧酒店官方公众号</h3>
            <img src="" alt="二维码" class="qr-code">
            <p>扫码免费学习更多酒店营销干货</p>
          </div>

          <!-- 常见问题部分 -->
          <div class="faq-section">
            <h3>常见问题</h3>
            <div v-for="(faq, index) in faqs" :key="index" class="faq-item">{{ faq }}</div>
          </div>

          <!-- 意见反馈部分 -->
          <div class="feedback-section">
            <img src="" alt="反馈图标" class="feedback-icon">
            <p>意见与反馈</p>
            <p>我们会及时反馈您的宝贵意见</p>
          </div>
        </div>
      </el-aside>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 初始化数据
const onlineBookings = ref(0);
const expectedCheckins = ref(0);
const newCheckins = ref(0);
const newCustomers = ref(0);

// 获取当前日期和时间
const currentDate = ref('');
const currentTime = ref('');

onMounted(() => {
  const now = new Date();
  currentDate.value = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')}`;
  currentTime.value = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
});
// 试用版信息
const remainingDays = ref(2);
const expirationDate = ref('2025.3.7到期');

// 公告数据
const announcements = ref([
  { title: '微信小程序备案通知', date: '2/21', isImportant: true },
  { title: '微盟接入微信小程序《隐私保护...', date: '9/11', isImportant: false },
  { title: '社区团购多重优化升级，全力支...', date: '5/13', isImportant: false },
  { title: '微盟技术标识产品升级', date: '6/24', isImportant: false },
  { title: '营销中心全新改版', date: '5/27', isImportant: false }
]);

// 常见问题数据
const faqs = ref([
  '"微盟酒店"是否支持免费试用？',
  '堂食订单如何配置小票打印？',
  '如何申请小程序？',
  '自定义菜单如何设置？',
  '小程序绑定已有商户号开通微信...',
  '如何进行支付配置？'
]);

const handleUpgrade = () => {
  // 这里可以添加升级的逻辑，比如跳转到升级页面
  console.log('点击了立即升级');
};
</script>
<style scoped>
.data-overview {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 15px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.data-container {
  display: flex;
  justify-content: space-around;
}

.data-item {
  text-align: center;
}

.value {
  font-size: 30px;
  color: blue;
  margin-bottom: 5px;
}

.label {
  font-size: 14px;
}
</style>
<style scoped>
.app-container {
  padding: 20px;
}

.trial-section {
  border: 1px solid #ccc;
  padding: 15px;
  margin-bottom: 20px;
}

.upgrade-btn {
  background-color: red;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.announcement-section {
  margin-bottom: 20px;
}

.announcement-list {
  list-style: none;
  padding: 0;
}

.announcement-item {
  margin-bottom: 10px;
}

.date {
  color: #999;
}

.more-link {
  color: blue;
  text-align: right;
  cursor: pointer;
}

.official-account-section {
  text-align: center;
  margin-bottom: 20px;
}

.qr-code {
  width: 150px;
  height: 150px;
  margin: 10px auto;
}

.faq-section {
  margin-bottom: 20px;
}

.faq-item {
  margin-bottom: 10px;
}

.feedback-section {
  display: flex;
  align-items: center;
}

.feedback-icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
</style>